<template>
	<div class="Zhenrong">
		<template v-if='homeList.length > 0'>
			<div class="main">
				<div class="left" ref='mainLeft'>
					<span 
						v-for='(item,index) in homeList' 
						:data-pos='item.pos'>{{item.num}}
					</span>
				</div>
				<div class="right">
					<span 
						v-for='(item,index) in awayList' 
						:data-pos='item.pos'>{{item.num}}
					</span>
				</div>
			</div>
			<div class="teamerList">
				<h3>首发</h3>
				<div class="teamerList-box">
					<ul class="teamerList-l">
						<li 
							v-for='(itemH,index) in homeList'
							v-if='itemH.pos!==0'
							@click='goshooterDeatil(hEngName,itemH.num)'
						>
							<span class="icon">{{ itemH.num }}</span>
							<div>
								<p>{{ itemH.name | ellipses("10") }}</p>
								<span class="txt">{{ itemH.p_pos }}</span>
							</div>
						</li>
					</ul>
					<ul class="teamerList-r">
						<li 	
							v-for='(itemA,index) in awayList'
							v-if='itemA.pos!==0'
							@click='goshooterDeatil(aEngName,itemA.num)'
						>
							<div>
								<p>{{ itemA.name | ellipses("10") }}</p>
								<span class="txt">{{ itemA.p_pos }}</span>
							</div>
							<span class="icon">{{ itemA.num }}</span>
						</li>
					</ul>
				</div>
				
			</div>
			<div class="teamerList">
				<h3>替补</h3>
				<div class="teamerList-box">
					<ul class="teamerList-l">
						<li 
							v-for='(itemHTB,index) in homeList'
							v-if='itemHTB.pos===0'
							@click='goshooterDeatil(hEngName,itemHTB.num)'>
							<span class="icon">{{ itemHTB.num }}</span>
							<div>
								<p>{{ itemHTB.name | ellipses("10") }}</p>
								<span class="txt">{{ itemHTB.p_pos | textNull  }}</span>
							</div>
						</li>
					</ul>
					<ul class="teamerList-r">
						<li 
							v-for='(itemATB,index) in awayList'
							v-if='itemATB.pos===0'
							@click='goshooterDeatil(aEngName,itemATB.num)'>
							<div>
								<p>{{ itemATB.name | ellipses("10") }}</p>
								<span class="txt">{{ itemATB.p_pos | textNull }}</span>
							</div>
							<span class="icon">{{ itemATB.num }}</span>
						</li>
					</ul>
				</div>
			</div>
		</template>
		<div v-else class="noData">暂无比赛阵容！</div>
	</div>
</template>
<script>
export default {
	name: 'deatilZhenrong',
	props:{
      homeList:Array,
      awayList:Array,
      aEngName:String,
      hEngName:String,
    },
	data: function(){
		return {}
	},
	methods:{
		setPOs(){
			if (this.homeList.length > 0) {
				var leftObj = $('.left span');
				leftObj.each(function(index,dom){
					var len = $(dom).attr("data-pos").length;
					if( len==2&&$(dom).attr("data-pos")=='11' ){
		                $(dom).css("top",'44.445%');
		                $(dom).css("left",'4%');
		            }else if(len==2){
		                $(dom).css("top",(96-$(dom).attr("data-pos").slice(1)*10.2222222)+'%');
		                $(dom).css("left",($(dom).attr("data-pos").slice(0,1)-1)*8.5+4+'%');
		            }else if(len==3&&$(dom).attr("data-pos").slice(0,2)=="10"){
		                $(dom).css("top",(96-$(dom).attr("data-pos").slice(2)*10.2222222)+'%');
		                $(dom).css("left",($(dom).attr("data-pos").slice(0,2)-1)*8.5+4+'%');
		            }else{
		                $(dom).css("top",(96-$(dom).attr("data-pos").slice(2)*10.2222222)+'%');
		                $(dom).css("right",'0%');
		            }
				})
			}
			if(this.awayList.length > 0){
				var rightObj = $('.right span');
				rightObj.each(function(index,dom){
					var len = $(dom).attr("data-pos").length;
					if( len==2&&$(dom).attr("data-pos") =='11' ){
		                $(dom).css("top",'44.445%');
		                $(dom).css("right",'4%');
		            }else if(len==2){
		                $(dom).css("top",(96-(10-$(dom).attr("data-pos").slice(1))*10.2222222)+'%');
		                $(dom).css("right",($(dom).attr("data-pos").slice(0,1)-1)*8.5+4+'%');
		            }else if(len==3&&$(dom).attr("data-pos").slice(0,2)=="10"){
		                $(dom).css("top",(96-(10-$(dom).attr("data-pos").slice(2))*10.2222222)+'%');
		                $(dom).css("right",($(dom).attr("data-pos").slice(0,2)-1)*8.5+4+'%');
		            }else{
		                $(dom).css("top",(96-(10-$(dom).attr("data-pos").slice(2))*10.2222222)+'%');
		                $(dom).css("left",'0%');
		            }
				})
			}
		},
		goshooterDeatil(name,num){
			this.$router.push('/ShooterList/'+name+'/'+num)
		}
	},
	mounted:function() {
		
	},
	updated(){
		this.setPOs()
	}
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.main{
		position: relative;
		top: 0;
		left: 0;
		background: url(/static/img/bgzl.png) no-repeat;
		background-size: 100% 100%;
		width: 7.5rem;
		height: 4.2rem;
		margin:auto;
	}
	.left{
		position:absolute;
		width: 50%;
		height: 4.2rem;
		left: 0;
		top: 0;
		span{
			position:absolute;
			width: .42rem;
			height: .42rem;
			background:url(/static/img/homeplayer.png) center no-repeat;
			background-size:100% 100%;
			text-align: center;
			line-height: .42rem;
			color: #008EFF;
		}
	}
	.right{
		position:absolute;
		width: 50%;
		height: 4.2rem;
		left: 50%;
		top: 0;
		span{
			position:absolute;
			width: .42rem;
			height: .42rem;
			background:url(/static/img/awayplayer.png) center no-repeat;
			background-size:100% 100%;
			text-align: center;
			line-height: .42rem;
			color: #fff;
		}
	}
	.main span[data-pos='0'] {
	    display: none;
	}
	.teamerList{
		padding: .6rem 0 .2rem;
		h3{
			color: #333;
			font-weight: bold;
			text-align: center;
		}
	}
	.teamerList-box{
		display: flex;
		ul{
			flex: 1;
			li{
				padding:.2rem;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items:center;
				span.icon{
					width: .42rem;
				    height: .42rem;
				    text-align: center;
				    line-height: .42rem;
				    vertical-align: middle;
				    display: inline-block;
				    font-size: 12px;
				}
				p{
					line-height: .36rem;
					color: #333;
					font-size: .26rem;
					font-weight: bold;
				}
				.txt{
				    color: #A9A9A9;
				    line-height: 22px;
				}
			}
		}
		.teamerList-r li{
			justify-content: flex-end;
			text-align: right;
			span.icon{
				background: url(/static/img/awayplayer.png) no-repeat left center;
				background-size: .42rem;
				color: #fff;
				margin-left: .2rem;
			}
		}
		.teamerList-l li{
			justify-content: flex-start;
			span.icon{
				background: url(/static/img/homeplayer.png) no-repeat left center;
				background-size: .42rem;
				color: #008EFF;
				margin-right: .2rem;
			}
		}
	}
</style>